<template>
	<view class="articles-list" :style="{ backgroundColor: '#1e1e36' }">
		<!-- 页面顶部说明 -->
		<view class="description">
			文章内容来自<text class="link">astronomy</text>
		</view>

		<!-- 加载提示 -->
		<view v-if="loading" class="loading-message">正在加载文章，请稍候...</view>

		<!-- 如果没有文章时显示提示信息 -->
		<view v-else-if="!articles || articles.length === 0" class="no-articles-message">暂无文章</view>

		<!-- 文章列表 -->
		<ul v-else class="article-list">
			<li v-for="(item, index) in articles" :key="index" class="article-item">
				<view class="thumbnail-link">
					<image :src="item.thumbnail" class="thumbnail" mode="widthFix"
						style="width: 100%;margin-bottom: -10px;" @click="previewImage(item.thumbnail, index)" />
				</view>
				<text class="title">{{ item.title }}</text>
			</li>
		</ul>

		<!-- 分页按钮 -->
		<view class="pagination">
			<button @click="fetchArticles(currentPage - 1)" :disabled="currentPage <= 1">上一页</button>
			<text>第 {{ currentPage }} 页</text>
			<input type="number" v-model.number="jumpPage" placeholder="输页码" />
			<button @click="jumpToPage" :disabled="isNaN(jumpPage) || jumpPage < 1">跳转</button>
			<button @click="fetchArticles(currentPage + 1)">下一页</button>
		</view>
	</view>
</template>

<script>
	import config from '@/config.js';
	export default {
		data() {
			return {
				articles: [], // 存储从服务器获取的文章数据
				currentPage: 1, // 当前页码，默认第一页
				loading: true, // 加载状态标志
				jumpPage: null, // 新增属性，用于存储用户输入的页数
			};
		},
		methods: {
			fetchArticles(page = this.currentPage) {
				this.loading = true; // 开始加载时设置为true

				const that = this;
				uni.request({
					url: `${config.BASE_URL}/picture/${page}`, // 修改后的URL，页数作为路径参数
					method: 'GET',
					header: {
						'content-type': 'application/json' // 默认值
					},
					success(res) {
						if (res.statusCode === 200) {
							that.articles = res.data || [];
							that.currentPage = page;
						} else {
							console.error('Error fetching articles:', res);
						}
					},
					fail(error) {
						console.error('Error fetching articles:', error);
					},
					complete() {
						that.loading = false; // 请求完成后（无论成功或失败）设置为false
					}
				});
			},
			jumpToPage() {
				if (this.jumpPage > 0) {
					this.fetchArticles(this.jumpPage);
				}
			},
			previewImage(currentUrl, index) {
				// 生成所有图片的URL数组
				const urls = this.articles.map(item => item.thumbnail);

				uni.previewImage({
					current: currentUrl, // 当前显示图片链接
					urls: urls, // 所有图片链接列表
					indicator: 'number', // 显示页码指示器
					loop: true, // 支持循环预览
					success: () => {
						console.log('预览图片成功');
					},
					fail: (err) => {
						console.error('预览图片失败:', err);
					}
				});
			},
		},
		mounted() {
			this.fetchArticles(); // 页面加载时默认获取第一页的数据
		}
	};
</script>

<style scoped lang="scss">
	/* 添加点击效果优化 */
	.thumbnail {
		cursor: pointer;
		transition: transform 0.3s ease;

		&:active {
			transform: scale(0.98);
		}
	}
	
	.articles-list {
		padding: 20px;
		color: #fff; // 设置字体颜色为白色

		.description {
			margin-bottom: 20px;
			font-size: 14px;

			.link {
				color: #fff;
				text-decoration: none;
				cursor: pointer;

				&:hover {
					text-decoration: underline;
				}
			}
		}

		.loading-message,
		.no-articles-message {
			text-align: center;
			margin-top: 50px;
			font-size: 18px;
		}

		.article-list {
			list-style: none;
			padding: 0;
			margin: 0;

			.article-item {
				background-color: #242444;
				border-radius: 8px;
				margin-bottom: 20px;
				overflow: hidden;
				transition: transform 0.2s ease-in-out;

				&:active {
					transform: translateY(-5px);
				}

				.thumbnail-link {
					display: block;
					padding: 15px;

					.thumbnail {
						width: 100%; // 图片宽度为容器的100%
						height: auto; // 维持图片宽高比
						object-fit: cover;
						border-radius: 4px;
					}
				}

				.title {
					padding: 8px;
					margin: 0;
					font-size: 16px;
					line-height: 1.4;
					white-space: pre-wrap; // 允许文本换行
				}
			}
		}

		.pagination {
			margin-top: 20px;
			display: flex;
			justify-content: center;
			align-items: center;

			button {
				margin: 0 5px;
				padding: 5px 10px;
				cursor: pointer;
				background-color: #242444;
				color: #fff;
				border: none;
				border-radius: 4px;
				font-size: 15px;

				&[disabled] {
					opacity: 0.5;
					cursor: not-allowed;
				}
			}

			text {
				margin: 0 10px;
				color: #fff;
			}

			input {
				margin: 0 5px;
				padding: 5px;
				border: 1px solid #ccc;
				border-radius: 4px;
				text-align: center;
				width: 50px;
			}
		}
	}
</style>